@charset "utf-8";
@import "../../assets/css/config";

.view-intro {
	&__canvas{
		@include absWin;
		background: transparent; 
		z-index: 2;
		transition: all cubic-bezier(.165,.84,.44,1) 0.8s;
		transform-origin: 100% 40%;
	}

	&.run{
		.pakage__one{
			animation: fudong 1.2s cubic-bezier(.165,.84,.44,1) forwards;
		}
		.pakage__two{
			animation: fudong 1.5s cubic-bezier(.165,.84,.44,1) forwards 0.2s;
		}
		.pakage__three{
			animation: fudong 1.5s cubic-bezier(.165,.84,.44,1) forwards 0.3s;
		}
		.pakage__red1{
			animation: fudong_redpack 1.6s cubic-bezier(.165,.84,.44,1) forwards 0.4s;
		}
		.pakage__red2{
			animation: fudong_redpack 1.6s cubic-bezier(.165,.84,.44,1) forwards 0.5s;
		}
		.pakage__text{
			animation: fudong 1.2s cubic-bezier(.165,.84,.44,1) forwards 0.6s;
		}
	}
	&.disappear{
		.pakage__one{
			transform: translateY(0);
			animation: disappear 1.2s cubic-bezier(.165,.84,.44,1) forwards  0.2s;
		}
		.pakage__two{
			transform: translateY(0);
			animation: disappear 1s cubic-bezier(.165,.84,.44,1) forwards  0.2s;
		}
		.pakage__three{
			transform: translateY(0);
			animation: disappear 1s cubic-bezier(.165,.84,.44,1) forwards 0.1s;
		}
		.pakage__red1{
			transform: translateY(0);
			animation: disappear_redpack 1s cubic-bezier(.165,.84,.44,1) forwards 0.2s;
		}
		.pakage__red2{
			transform: translateY(0);
			animation: disappear_redpack 1s cubic-bezier(.165,.84,.44,1) forwards 0.2s;
		}
		.pakage__text{
			transform: translateY(0);
			animation: disappear 1.2s cubic-bezier(.165,.84,.44,1) forwards;
		}

		.view-intro__canvas{
			opacity: 0;
			transform: scale(0, 0);
		}
	}
}

.pakage{
	position: absolute;
	left: 0;
	height: 3.8rem;
	bottom: 0;
	width: 100%;
	z-index: 10;
	transform: translateZ(0);
	&__one{
		width: 100%;
		height: 4.6rem;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
		background: url("../../assets/images/bg_pakage_1.png") 50% 0 no-repeat;
		background-size: 100% 100%;
		transform: translateY(180%);
	}
	&__two{
		width: 100%;
		height: 3.0rem;
		position: absolute;
		top: 0.2rem;
		right: 0;
		z-index: 6;
		background: url("../../assets/images/bg_pakage_2.png") 50% 0 no-repeat;
		background-size: 100%;
		transform: translateY(180%);
	}
	&__three{
		width: 100%;
		height: 3.0rem;
		position: absolute;
		top: 0.85rem;
		right: 0;
		z-index: 7;
		background: url("../../assets/images/bg_pakage_3.png") 50% 0 no-repeat;
		background-size: 100%;
		transform: translateY(180%);
	}

	&__red1{
		width: 1.3rem;
		height: 1.3rem;
		position: absolute;
		top: 0.55rem;
		right: 1.1rem;
		z-index: 8;
		background: url("../../assets/images/redpack_1.png") 50% no-repeat;
		background-size: cover;
		transform: translateY(4.0rem);
	}
	&__red2{
		width: 1.2rem;
		height: 1rem;
		position: absolute;
		top: 0.75rem;
		right: .3rem;
		z-index: 8;
		background: url("../../assets/images/redpack_2.png") 50% no-repeat;
		background-size: cover;
		transform: translateY(4.0rem);
	}

	&__text{
		width: 100%;
		z-index: 10;
		position: absolute;
		bottom: 0.8rem;
		padding: 0 0.5rem;
		font-size: 0.4rem;
		color: #fff;
		line-height: 0.55rem;
		transform: translateY(180%);
	}
}

@keyframes fudong{
	0%{
		transform: translateY(180%);
	}
	40%{
		transform: translateY(-2%);
	}
	100%{
		transform: translateY(0);
	}
}

@keyframes fudong_redpack{
	0%{
		transform: translateY(4.0rem);
	}
	40%{
		transform: translateY(-0.1rem);
	}
	100%{
		transform: translateY(0);
	}
}


@keyframes disappear{
	0%{
		transform: translateY(0);
	}
	40%{
		transform: translateY(-5%);
	}
	100%{
		transform: translateY(180%);
	}
}

@keyframes disappear_redpack{
	0%{
		transform: translateY(0);
	}
	40%{
		transform: translateY(-0.1rem);
	}
	100%{
		transform: translateY(5.0rem);
	}
}